<script setup>
import { ref } from 'vue';
import Quill from 'quill'
import useUserStore from '@/store/user';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Finished } from '@element-plus/icons-vue'

defineProps({
  results: Array
})
const emit = defineEmits(['clickDelete', 'clickEdit'])

const rateValue = ref(null)

const resultMap = Object.create(null)
const initialContent = (el, result) => {
  if (!el) return
  const { id, content } = result
  if (resultMap[id]) return
  const editor = new Quill(el, { theme: 'snow', modules: { toolbar: false }, readOnly: true })
  resultMap[id] = editor
  editor.setContents(content)
}

const userStore = useUserStore()
const onClickDelete = (resultId) => {
  ElMessageBox.alert('确认删除该回复吗？', {
    confirmButtonText: '确认',
    callback: (action) => {
      if (action === 'confirm') {
        emit('clickDelete', resultId)
      }
    }
  })
}

const opResultId = ref(null)
const onClickEdit = (resultId) => {
  if (opResultId.value) {
    resultMap[opResultId.value].disable()
    if (opResultId.value === resultId) {
      return opResultId.value = null
    }
  }
  opResultId.value = resultId
  resultMap[opResultId.value].enable()
}

const editWrap = () => {
  if (!resultMap[opResultId.value]) return
  if (resultMap[opResultId.value].getLength() < 10) return ElMessage.warning('最少需要输入10个字符')
  if (resultMap[opResultId.value].getLength() > 100000) return ElMessage.warning('最多输入长度为 100000')
  emit('clickEdit', { resultId: opResultId.value, content: resultMap[opResultId.value].getContents() })
  resultMap[opResultId.value].disable()
  opResultId.value = null
}
</script>

<template>
  <section>
    <ul v-if="results.length">
      <li v-for="(result, index) in results" :key="result.id">
        <div class="answerer">
          <h1 class="person">
            {{ index + 1 }}楼： {{ result.username === 'visitor' ? '热心网友' : result.username }} 的回答
            <el-button
              v-if="result.answerer === userStore.userinfo?.id"
              size="small"
              type="warning"
              :icon="Edit"
              @click="() => onClickEdit(result.id)"
            />
            <el-button
              v-if="opResultId === result.id"
              size="small"
              type="warning"
              :icon="Finished"
              @click="editWrap"
            />
            <el-button
              v-if="userStore.userinfo?.isAdmin"
              size="small"
              type="danger"
              :icon="Delete"
              @click="() => onClickDelete(result.id)"
            />
          </h1>
          <!-- <span class="time">{{ formatTime(result.createdAt) }} · TA的回答获得1105个星</span>
            <div class="rate">
              满意度：
              <el-rate v-model="rateValue" />
          </div>-->
        </div>
        <div class="result-container" :ref="el => initialContent(el, result)"></div>
        <el-divider />
      </li>
    </ul>
    <el-empty v-else description="暂无回复" />
  </section>
</template>

<style lang="sass" scoped>

section
  margin-top: 20px
  .answerer
    display: grid
    grid-template-rows: 2
    margin-bottom: 16px
    position: relative
    .person
      font-size: 24px
    .time
      margin-top: 6px
      font-size: 12px
      color: #636363
    .rate
      display: flex
      align-items: center
      position: absolute
      right: 0
      font-size: 12px
  .result-container
    font-size: 14px
    :deep(blockquote)
      padding: 10px 0
      padding-left: 16px
      background: #f0f0f0
      border-left: 8px solid #dddfe4
</style>
